import { useDispatch, useSelector } from 'react-redux'
import { del } from '../store/actions/todos'
import { changeType } from '../store/actions/filter'
const TodoFooter = () => {
  const dispatch = useDispatch()

  const list = useSelector((state) => state.todos)
  const active = list.filter((item) => item.isDone === false).length

  const typeList = ['All', 'Active', 'Completed']

  const types = useSelector((state) => state.filter)
  // 切换状态
  const change = (type) => {
    dispatch(changeType(type))
  }

  // 清除已完成
  const clearList = () => {
    list.forEach((item) => {
      if (item.isDone === true) {
        dispatch(del(item.id))
      }
    })
  }
  return (
    <footer className="footer">
      <span className="todo-count">
        未完成 <strong>{active}</strong>
      </span>
      <ul className="filters">
        {typeList.map((item) => (
          <li key={item}>
            <a
              href="/#"
              className={item === types ? 'selected' : ''}
              onClick={() => change(item)}
            >
              {item}
            </a>
          </li>
        ))}
      </ul>
      <button className="clear-completed" onClick={clearList}>
        清除已完成
      </button>
    </footer>
  )
}

export default TodoFooter
